<template>
  <div class="ContactIndex_container">
    <div class="banner"></div>
    <div class="title">个人信息</div>
    <div class="avavar">
      <van-image round width="6rem" height="6rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="name">
      {{ $store.getters.userInfo.username }}
    </div>

    <div class="more">
      <div style="margin-bottom: 30px;" @click="$router.push('/change_password')">
        <i class="iconfont icon-anquan"></i>
        <span>修改密码</span>
      </div>
      <div @click="$router.push('/login')">
        <i class="iconfont icon-fanhui"></i>
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactIndex',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {}
}
</script>
<style scoped lang='less'>
.ContactIndex_container {
  height: 100vh;

  .banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    height: 200px;
  }

  .banner::after {
    height: 200px;
    content: '';
    width: 200%;
    position: absolute;
    left: -50%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background-image: url('../../assets/image/WechatIMG196.jpg');
    background-size: cover;
  }

  .avavar {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%)
  }

  .title {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 20px;
    font-size: 18px;
    font-weight: 700;
  }

  .name {
    text-align: center;
    margin-top: 60px;
    font-size: 26px;
    font-weight: 700;
  }

  .more {
    padding: 80px 40px;

    div {
      display: flex;
      align-items: center;

      i {
        font-size: 24px;
        color: #666666;
        margin-right: 30px;
      }

      span {
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  // .moreTitle{
  //   font-size: 16px;
  //   font-weight: 700;
  //  vertical-align: sub;
  // }
  // .icon{
  //   font-size: 26px;
  //   margin-right: 30px;
  // }
}
</style>
